<template>
    <el-dialog
      :destroy-on-close="true"
      :close-on-click-modal="false"
      modal-append-to-body lock-scroll top="10%"
      :width="'800px'"
      :title="$t('webchat.toolbarAdjustment')"
      :visible.sync="isdialog" >
      <div class="title">{{$t('webchat.toolbarAdjustmentWarn')}}</div>
      <draggable :list="tabClone" :options="{handle:'.handle', name: rondomName}" @start="drag=true" @end="drag=false">
        <div v-for="tab in tabClone">
          <span class="handle iconfont icon-shunxutuozhuai"></span>
          <span class="tab-con-name" v-if="type === 'webchat'">{{$t(tab.name) || tab.name}}</span>
          <span class="tab-con-name" v-else>{{tab.labelName || tab.name}}</span>
        </div>
      </draggable>
      <div slot="footer">
        <el-button class="primary_btn" @click="cancel">{{$t('public.cancel')}}</el-button>
        <el-button type="primary" class="primary_btn" @click="save">{{$t('public.confirm')}}</el-button>
      </div>
    </el-dialog>
</template>

<script>
    import draggable from 'vuedraggable'
    import {deepClone} from '@/utils/m7Utils'
    export default {
      name: 'edit-tab',
      components: {
        draggable
      },
      data () {
        return {
          isdialog: false,
          tabClone: [],
          rondomName: ''
        }
      },
      props: {
        type: {
          type: String,
          default: () => {
            return 'webchat'
          }
        },
        tabs: {
          type: Array,
          default: function () {
            return []
          }
        }
      },
      methods: {
        open () {
          this.tabClone = deepClone(this.tabs)
          this.isdialog = true
        },
        cancel () {
          this.isdialog = false
        },
        save () {
          this.tabClone.forEach((tab) => {
            delete tab.click
          })
          this.isdialog = false
          this.$emit('updateTabConfig', this.tabClone)
        }
      },
      mounted () {
        this.rondomName = Math.random()
      }
    }
</script>

<style lang="stylus" scoped>
  @import '../../../../../../assets/common.styl'
  .title
    margin-bottom 10px
    color $c-prompt
  .icon-shunxutuozhuai
    cursor move
    color $c-affix
  .tab-con-name
    color $cf-gray0
</style>
